<template>
  <div class="hand-approve">
    <el-row class="header" type="flex" justify="space-between">
      <div>
        <span class="header-title">【ID{{ previewObj.id }}】{{ previewObj.title }}</span>
      </div>
    </el-row>
    <el-row :gutter="10" class="content">
      <el-col class="content-left" :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
        <el-tabs v-model="activeName">
          <el-tab-pane name="dealWithSign">
            <span slot="label"><i class="el-icon-message"></i> 处理签</span>
            <pager v-if="pagerType === 'handler'" :pager="previewObj"></pager>
            <recevie v-else :pager="previewObj"></recevie>
          </el-tab-pane>
          <el-tab-pane name="baseInfo">
            <span slot="label"><i class="el-icon-date"></i> 详情信息</span>
            <div class="contcontent-left-des" v-html="previewObj.body"></div>
            <div class="fileList" v-if="hasTaskFile">
              <div class="text">附件</div>
              <div class="items">
                <div class="item" v-for="(item,index) in previewObj.taskFile" :key="index">
                  <image-type :width="20" :fileType="item.fileType"></image-type>
                  <span class="name" @click="previewFile(item)">{{ item.name }}</span>
                  <!-- <div class="toolBox">
                    <el-button type="text" @click="previewFile(item, 1)">在线阅读</el-button>
                    <el-button type="text" @click="previewImage(item.url)">下载</el-button>
                  </div> -->
                </div>
              </div>
            </div>
            <div class="fileUpload-history" v-if="previewObj.data_type === '文件上传'">
              <div class="title" v-if="historyFileNum">
                <i class="el-icon-paperclip"></i>
                <span class="name">已上传文件记录</span>
              </div>
              <history-file ref="historyFile" :taskId="previewObj.id" @setHistoryFileNum="getHistoryFileNum"></history-file>
            </div>

            <!-- <el-divider></el-divider> -->
            <div class="table-model">
              <TableInfo :taskId="taskid" v-if="previewObj.data_type === '表格填报'"  :initTableHeader="previewObj.form_data"
                :preview="isHand"></TableInfo>
            </div>
            <div class="question-model">
              <QuestionRecord :taskId="taskid" :isHand="isHand" :preview="true" v-if="previewObj.data_type === '测评问卷'">
              </QuestionRecord>
            </div>
          </el-tab-pane>
          <el-tab-pane name="taskIndex" v-if="previewObj.data_type === '文件上传' && previewObj.target">
            <span slot="label"><i class="el-icon-coordinate"></i> 任务指标</span>
            <RelateTarget ref="targetInfo" v-if="previewObj.target" :isShow="true" :isMark="true" :preivew="true"
              :target="previewObj.target" />
          </el-tab-pane>
          <el-tab-pane name="subTask">
            <span slot="label"><i class="el-icon-medal"></i> {{ taskSize }}</span>
            <el-table :data="previewObj.child" stripe style="width: 100%;">
              <el-table-column prop="title" label="任务名称" min-width="280" align="left">
                <template slot-scope="{ row, $index}">
                  <span class="subTask" @click="linkToDetail(row.id)">{{ row.title }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="classify__name" label="上报类别" min-width="90"></el-table-column>
              <el-table-column prop="data_type" label="任务类别" min-width="90"></el-table-column>
              <el-table-column prop="emergency_level" label="紧急程度" min-width="90"></el-table-column>
              <el-table-column label="截至日期" min-width="180">
                <template slot-scope="{row}">
                  <span>{{ parseTime(row.end_time) }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col class="content-right" :xs="24" :sm="24" :md="24" :lg="6" :xl="6" v-if="isShowBaseInfo">
        <div class="desc">基本信息</div>
        <el-form ref="form" label-width="90px" class="baseinfo">
          <el-form-item label="任务名称"> 
            {{previewObj.title || '- -'}}
          </el-form-item>
          <el-form-item label="任务类别"> {{previewObj.classify_name || '- -'}}</el-form-item>
          <el-form-item label="上报类别"> {{previewObj.data_type || '- -'}}</el-form-item>
          <el-form-item label="紧急程度">
            <el-tag :type="previewObj.emergency_level | tagType">
              {{ previewObj.emergency_level }}
            </el-tag>
          </el-form-item>
          <el-form-item label="截止时间"> {{ parseTime(previewObj.end_time) }}</el-form-item>
          <el-form-item label="创建人"> {{previewObj.owner}}</el-form-item>
          <el-form-item label="创建时间"> {{ parseTime(previewObj.create_time) }}</el-form-item>
          <el-form-item label="发布状态">
            <el-tag :type="previewObj.status | tagType">
              {{ previewObj.status }}
            </el-tag>
            <!-- {{previewObj.is_publish | formatTime}} -->
          </el-form-item>
          <el-form-item label="是否完成">
            <el-switch v-model="previewObj.is_finish" disabled></el-switch>
          </el-form-item>
          <el-form-item label="处理人">
            <el-tooltip :content="item" placement="right" effect="light" v-for="(item,index) in previewObj.username" :key="index">
              <div class="owner">{{ item }}</div>
            </el-tooltip>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {
    postCreateTask,
    getTaskInfo,
    updateTaskPart
  } from '@/api/work.js'
  import {
    getTable,
    getQuestion
  } from '@/api/question.js'
  import {
    parseTime,
    getFileType,
    previewFile
  } from '@/utils/index.js'
  import Pager from './Pager'
  export default {
    name: 'taskPreview',
    components: {
      Pager,
      'TableInfo': () => import('@/views/markSys/taskCenter/showRecord/components/TableInfo.vue'),
      'QuestionRecord': () => import('@/views/markSys/questionRecord/index.vue'),
      'ImageType': () => import('@/components/ImageType'),
      'FileUpload': () => import("@/components/FileUpload"),
      'RelateTarget': () => import("@/views/markSys/taskCenter/components/relateTarget"),
      'Pager': () => import("./Pager"),
      'Recevie': () => import("./recevie"),
      'HistoryFile': () => import('../../pendingTask/report/components/historyFile')
    },
    data() {
      return {
        previewObj: {},
        activeName: 'dealWithSign',
        historyFileNum: 0, // 历史上传文件数量
        taskid: null,
        pagerType: '',
        isHand: false
      }
    },
    computed: {
      createTime() {
        const date = new Date(this.previewObj.create_time)
        return parseTime(date, '{y}-{m}-{d}')
      },
      endTime() {
        const date = new Date(this.previewObj.end_time)
        return parseTime(date, '{y}-{m}-{d}')
      },
      isQuestion() {
        return this.previewObj.data_type === '测评问卷' ? true : false
      },
      hasTaskFile() {
        return this.previewObj.taskFile && !!this.previewObj.taskFile.length
      },
      taskSize() {
        const size = (this.previewObj.child && this.previewObj.child.length) || 0
        return '子任务(' + size  + ')'
      },
      isShowBaseInfo(){
        const width = document.documentElement.clientWidth
        if(width < 1200){
          if(this.activeName === 'baseInfo') return true
          return false
        }
        return true
      }
    },
    created() {
      const params = this.$route.params
      this.pagerType = params.type
      const id = 284
      this.taskid = params.targetId
      this.fetchData(this.taskid)
    },
    methods: {
      parseTime,
      previewFile,
      // 返回历史上传文件记录数量
      getHistoryFileNum(num) {
        this.historyFileNum = num
      },
      fetchData(id) {
        if(!id){
          this.$router.push({path: '/'})
          return
        }
        // 获取基础填信息
        getTaskInfo(id).then(res => {
          this.previewObj = res.data
          this.formatData(this.previewObj)
        })
      },
      // 跳转到任务详情
      linkToDetail(id){
        this.$router.push({
          name: 'PreviewTask',
          params: {
            targetId: id,
          }
        })
      },
      formatFile(str) {
        const file = getFileType(str, '/')
        return decodeURI(file)
      },
      formatData(obj) {
        const res = []
        obj.status = obj.is_publish ? '已发布' : '未发布'
        obj.taskFile.forEach(e => {
          res.push({
            id: e.id,
            name: this.formatFile(e.url),
            url: process.env.VUE_APP_IMAGE_URL + '/upload/' + e.url,
            fileType: getFileType(e.url, '.')
          })
        })
        obj.taskFile = res
        return obj
      },
      formatFile(str) {
        const file = getFileType(str, '/')
        return decodeURI(file)
      }
    },
  }

</script>
<style lang="scss" scoped>
  .hand-approve{
    .header {
      padding: 10px 18px;
      // border-bottom: 1px solid #ddd;
      font-size: 18px;
      font-weight: 600;
      line-height: 2;
      align-items: baseline;
      .overdue-text{
        display: inline-block;
        height: 19px;
        line-height: 19px;
        vertical-align: text-top;
          font-size: 12px;
          color: #fff;
          background: #ff6060;
          border-radius: 4px;
          padding: 1px 3px;
        }
    }

    .content {
      padding: 5px 0;

      &-left,
      &-right {
        // border-right: 1px solid #ccc;
      }

      &-left {
        min-height: 355px;

        .fileList {
          display: flex;
          border-top: 1px solid #E4E7ED;

          .text {
            padding: 12px 0;
          }

          .items {
            margin-left: 20px;

            .item {
              display: flex;

              .name {
                padding: 12px 0;
                max-width: 500px;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: pointer;
                &:hover {
                  color: #409eff
                }
              }

              .toolBox {
                color: #6f6f6f;
                margin-left: 20px;
                opacity: 0;
              }

              &:hover {
                .toolBox {
                  opacity: 1;
                }
              }
            }
          }
        }

        .subTask {
          color: #409eff;
        }
      }

      &-right {
        .desc {
          padding: 10px 20px;
        }

        .baseinfo {
          padding: 0 20px;
        }

        .owner {
          display: inline-block;
          width: 38px;
          height: 38px;
          background: #98d5e8;
          color: #fff;
          text-align: center;
          vertical-align: middle;
          line-height: 40px;
          font-size: 13px;
          border-radius: 50%;
          margin: 0 4px 4px 0;
        }
      }
    }

    .report-wraper {
      .file-model {
        padding: 4px;
        background: #e0e0e0;
        /* border: 1px solid #ccc;
            border-radius: 6px; */
        display: flex;

        >span {
          min-width: 50px;
          font-size: 18px;
          line-height: 1.5;
          font-weight: bold;
        }

        .filtList {
          padding: 2px 0;
          margin: 0 8px;
          border-bottom: 1px solid #409eff;

          >span {
            color: #409eff;
          }

          .toolBox {
            text-align: center;

            .el-button {
              padding: 0;
            }
          }
        }
      }
    }

  }

</style>
<style>
  .el-form-item {
    margin: 0;
  }

  .el-form-item__label {
    text-align: left;
    font-size: 13px;
    color: #909090;
    font-weight: normal;
  }

  .el-form-item__content {
    font-size: 13px;
  }

  .el-tabs {
    margin: 0 20px;
  }

  .el-tabs__content {
    padding: 0 15px;
  }

  .el-tabs__nav-scroll {
    padding: 0 15px;
  }

  .el-tabs__item {
    height: 43px !important;
  }

  .el-divider--horizontal {
    margin: 22px 0;
  }

</style>
